<template>
  <view>
    <view class="order-index">
			<view class="date">
				<view class="list">
					<view class='item acea-row row-between-wrapper'>
						<view>选择日期</view>
						<view class='input acea-row row-between-wrapper'>
							<picker mode="date" @change="changeDate">
								<view>{{ date == '' ? '请选择日期' : date }}</view>
							</picker>
							<text class='iconfont icon-you'></text>
						</view>
					</view>
				</view>
			</view>
      <view class="public-wrapper">
        <view class="title" style="display: flex;justify-content: space-between;">
          <view><span class="iconfont icon-xiangxishuju"></span>详细数据</view>
					<view>总积分：{{ total }}</view>
        </view>
        <view class="nav acea-row row-between-wrapper">
          <view class="data">用户</view>
          <view class="browse">消费积分</view>
          <view class="turnover">日期</view>
        </view>
        <view class="conter" :style="{ maxHeight: h }">
          <view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
            <view class="data">{{ item.nickname }}</view>
            <view class="browse">{{ item.number }}</view>
            <view class="turnover">{{ item.create_time }}</view>
          </view>
					<view style="text-align: center;padding: 5px 0;" @click="loadMore">{{ loadText }}</view>
        </view>
				
      </view>
      
    </view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  jifenRecord
} from "@/api/admin";
export default {
  data() {
    return {
			total: 0,
			date: '',
      list: [],
      mer_id: '',
			loadText: '没有更多数据了',
			isMore: true,
			loading: false,
			page: 1,
			h: '100px'
    }
  },
  onLoad(options) {
	  this.mer_id = options.mer_id;
		this.h = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 150 + 'px';
		this.getRecord('');
  },
  methods: {
		getRecord(date) {
			this.loading = true;
			jifenRecord({
				date,
				mer_id: this.mer_id,
				page: this.page
			}).then(res => {
				console.log(res);
				this.loading = false;
				this.total = res.data.total_score;
				this.list = this.list.concat(res.data.list);
				this.loadText = '点击加载更多数据';
				if (res.data.list.length < 10) {
					this.isMore = false;
					this.loadText = '没有更多数据了';
				}
			})
		},
		changeDate(e) {
			this.date = e.detail.value;
			this.page = 1;
			this.list = [];
			this.getRecord(this.date);
		},
		loadMore() {
			console.log(1)
			console.log(this.loading)
			console.log(this.isMore)
			if (this.loading || !this.isMore) {
				return
			}
			console.log(2);
			this.page++;
			this.getRecord(this.date);
		}
  }
}
</script>

<style lang="scss" scoped>
.date .list {
		background-color: #fff;
	}
	.date .list .item {
		padding-right: 30rpx;
		height: 110rpx;
		border-bottom: 1px solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

.order-index .header .item {
  flex: 1;
  -webkit-flex: 1;
  -o-flex: 1;
  -ms-flex: 1;
  text-align: center;
  font-size: 24upx;
  color: #fff;
}

.order-index .header .item .num {
  font-size: 40upx;
  margin-bottom: 7upx;
  height: 60rpx;
}

.order-index .wrapper {
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  margin: -115upx auto 0 auto;
  padding-top: 25upx;
}

.order-index .wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 40upx;
}

.order-index .wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.order-index .wrapper .list .item {
  width: 33.33%;
  text-align: center;
  font-size: 24upx;
  color: #999;
  margin-bottom: 45upx;
}

.order-index .wrapper .list .item .num {
  font-size: 40upx;
  color: #333;
}

.public-wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 20upx;
}

.public-wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.public-wrapper {
  margin: 18upx auto 0 auto;
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  padding-top: 25upx;
}

.public-wrapper .nav {
  padding: 0 30upx;
  height: 70upx;
  line-height: 70upx;
  font-size: 24upx;
  color: #999;
	
	text-align: center;
}

.public-wrapper .data {
  width: 30%;
	text-align: center;
}

.public-wrapper .browse {
  width: 30%;
	text-align: center;
}

.public-wrapper .turnover {
  width: 30%;
	text-align: center;
}

.public-wrapper .conter {
  padding: 0 30upx;
	overflow-y: scroll;
}

.public-wrapper .conter .item {
  border-bottom: 1px solid #f7f7f7;
  height: 70upx;
  font-size: 24upx;
}

.public-wrapper .conter .item .turnover {
  // color: #d84242;
}
</style>
